<template>
	<div style="background-color: #DBDBDB;min-height: 100vh;color: #1f1f1f;">
		<div style="position: relative;height:4em;overflow: hidden;background-color: #000;">
			<div style="position:absolute;top: 0;left: 0;right: 0;height: 7em;background-color: #fff;opacity: 0.5;"></div>
			<div style="position: absolute;left: 1.0em;top: 0px;">
				<image :src="imgHttp + '/test/bg/logo.png'" style="height: 4em;width: 7em;"></image>
			</div>
		</div>
		<div @click="toIndex" style="display: flex;justify-items: center;margin: 0.5em;">
			<div>
				<image :src="imgHttp + '/test/back.png'" style="width: 1.5em;height:1.5em;"></image>
			</div>
			<div style="font-size: 1em;">返回首页</div>
		</div>
		<div style="text-align: center;font-size: 1.5em;margin-bottom: 1.0em;margin-top: 1.2em;">质保录入</div>
		
		<div class="row">
			<div class="inputlable">施工时间</div>
			<div class="inputright">
				<!--<input type="text" v-model="obj.quBuildTime" placeholder="请输入施工时间" class="inputText" />-->
				<div style="position: absolute;z-index: 101; width: calc(100% - 9em);">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="obj.quBuildTime" />
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 1.4em;">
			<div class="inputlable">汽车膜型号</div>
			<div class="inputright">
				<div style="position: absolute;z-index: 100; width: calc(100% - 9em);">
					<uni-data-select v-model="obj.quTypeId" style="color: red;background-color: #fff;height: 1.5em"
						:localdata="dataOptions"></uni-data-select>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 0.8em;">
			<div class="inputlable">产品品牌</div>
			<div class="inputright">
				<div style="position: absolute;z-index: 99; width: calc(100% - 9em);">
					<uni-data-select v-model="obj.quCaBrand" style="color: red;background-color: #fff;height: 1.5em"
						@change="change_pinpai" :localdata="dataOptions_Pinpai"></uni-data-select>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 0.5em;">
			<div class="inputlable">车主姓名</div>
			<div class="inputright">
				<input type="text" v-model="obj.quName" placeholder="请输入车主姓名" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车主电话</div>
			<div class="inputright">
				<input type="text" v-model="obj.quPhone" placeholder="请输入车主电话" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车架号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quVin" placeholder="请输入车架号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top:0.6em;margin-bottom: 0.5em;">
			<div class="inputlable">车型</div>
			<div class="inputright">
				<!-- <div style="position: absolute;z-index: 98; width: calc(50% - 4.5em);">
					<uni-data-select style="color: red;background-color: #fff;height: 1.5em" :localdata="range1"
						@change="range1Change"></uni-data-select>
				</div>
				<div style="position: absolute;left:calc(50% + 2.2em);z-index: 98;;width: calc(50% - 4.5em);">
					<uni-data-select style="color: red;background-color: #fff;height: 1.5em" v-model="obj.qu_model"
						:localdata="range2"></uni-data-select>
				</div> -->
				<input type="text" v-model="obj.qu_model" placeholder="请输入车型" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车牌号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quLicencePlate" placeholder="请输入车牌号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 0.8em;">
			<div class="inputlable">施工店名</div>
			<div class="inputright">
				<!-- <div style="position: absolute;z-index: 96; width: calc(100% - 9em);">
					<uni-data-select v-model="obj.quShop" style="color: red;background-color: #fff;height: 1.5em"
						@change="change_shop" :localdata="dataOptions_Shop"></uni-data-select>
				</div> -->
				<input type="text" v-model="obj.quShopName" placeholder="请输入施工店名" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 0.6em;">
			<div class="inputlable">质保编号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quQualityNum" placeholder="请输入质保编号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">施工部位</div>
			<div class="inputright">
				<input type="text" v-model="obj.quBuildDept" placeholder="请输入施工部位" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">贴车价格(CNY)</div>
			<div class="inputright">
				<input type="text" v-model="obj.quPasteMoney" placeholder="请输入贴车价格(CNY)" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">质保年限</div>
			<div class="inputright">
				<input type="text" v-model="obj.quAgeLimit" placeholder="请输入质保年限" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">产品型号</div>
			<div class="inputright">
				<input type="text" v-model="obj.prModel" placeholder="请输入产品型号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">膜筒序列号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quFilmNum" placeholder="请输入膜筒序列号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">图片</div>
			<div class="inputright" style="height: 3em;overflow: hidden;">
				<uni-file-picker style="width:10em;height: 10em;" v-model="imageValue" fileMediatype="image" mode="grid"
					@select="select" @progress="progress" @success="success" @fail="fail" />
			</div>
			<div class="clear"></div>
		</div>
		<div style="margin-top: 1em;">
			<button
				style="width: 90%;margin: 0 auto;height: 2.0em;line-height: 1.8em;font-size: 1.0em;background-color: #000;color: #fff;"
				@click="save">提交质保</button>
		</div>
		<div style="margin-top: 1em;">&nbsp;</div>
	</div>
</template>

<script>
	import api from '@/common/httprequest.js'
	export default {
		data() {
			return {
				imgHttp: api.getImgUrl(),
				dataOptions_Pinpai: [],
				dataOptions_Shop: [],
				imageValue: [],
				range1: [],
				range2: [],
				dataOptions: [{
						value: null,
						text: '请选择'
					}, {
						value: '100',
						text: '漆面膜'
					},
					{
						value: '101',
						text: '改色膜'
					},
					{
						value: '102',
						text: '太阳膜'
					},
					{
						value: '1013',
						text: '窗膜'
					}
				],
				obj: {
					prModel: null, //产品型号
					quAgeLimit: null, //质保年限
					quBuildColor: null, //施工颜色
					quBuildDept: null, //施工部门
					quBuildTime: null, //施工时间
					quCaBrand: null, //品牌名称id
					quCaBrandName: "请选择", //品牌名称
					quFilmNum: null, //膜筒序列号
					quFrontFilm: null, //前挡质保编号
					quFrontNum: null, //前挡膜筒序列号
					quLicencePlate: null, //车牌号
					quModel: null, //车型
					quName: null, //车主姓名
					quPasteMoney: null, //贴车价格
					quPhone: null, //车主电话
					quPic: null, //图片
					quQualityNum: null, //质保编号
					quShop: null, //施工店名id
					quShopName: null, //施工店名
					quSideFilm: null, //侧后档膜筒序列号
					quSideNum: null, //侧后档质保编号
					quTypeId: null, //产品类型id
					quVin: null //车架号
				}
			}
		},
		onLoad() {

		},
		async mounted() {
			await this.loadInt();
		},
		methods: {
			change_shop(e) {
				for (let i = 0; i < this.dataOptions_Shop.length; i++) {
					if (this.dataOptions_Shop[i].value === e) {
						this.obj.quShopName = this.dataOptions_Shop[i].text;
						break;
					}
				}
			},
			change_pinpai(e) {
				for (let i = 0; i < this.dataOptions_Pinpai.length; i++) {
					if (this.dataOptions_Pinpai[i].value === e) {
						this.obj.quCaBrandName = this.dataOptions_Pinpai[i].text;
						break;
					}
				}
			},
			//图片上传功能开始
			// 获取上传状态
			select(res) {
				//alert(JSON.stringify(e));
				let file = res.tempFiles[0];
				let baseURL = api.getUrl();

				uni.uploadFile({
					url: `${baseURL}/common/upload`, // 上传图片的接口
					filePath: file.path,
					formData: {
						'file': file
					},
					success: (uploadFileRes) => {
						//alert(JSON.stringify(uploadFileRes));
						//return;
						let responseData = JSON.parse(uploadFileRes.data);
						this.obj.quPic = responseData.fileName;
					}
				});


			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			//图片上传功能结束
			range1Change(e) {
				this.obj.qu_model = null;
				this.range2.splice(0, this.range2.length);
				uni.showLoading({
					title: '数据处理中...'
				});
				api.request({
					method: 'GET',
					url: "/applet/brandModel/list",
					params: {
						"pageNum": 1,
						"pageSize": 400,
						"brId": e
					},
				}).then(res => {
					uni.hideLoading();
					//alert(JSON.stringify(res));				
					if (res.code == 200) {
						//alert(JSON.stringify(res.data.rows));
						for (var i = 0; i < res.rows.length; i++) {
							var item = res.rows[i];
							var rangeItem = {
								value: item.brModel,
								text: item.brModel
							};
							this.range2.push(rangeItem);
						}
					}

				});
			},
			async loadInt() {
				await uni.showLoading({
					title: '数据处理中...'
				});
				await this.loadData().then(res => {
					uni.hideLoading();
				})
			},
			async loadData() {
				//增加汽车膜型号
				await api.request({
					method: 'GET',
					url: "/applet/brand/list",
					params: {
						"pageNum": 1,
						"pageSize": 400
					},
				}).then(res => {
					//alert(JSON.stringify(res));				
					if (res.code == 200) {
						//alert(JSON.stringify(res.rows));
						this.range1.slice(0, this.range1.length);
						for (var i = 0; i < res.rows.length; i++) {
							var item = res.rows[i];
							var rangeItem = {
								value: item.id,
								text: item.brBrand
							};
							this.range1.push(rangeItem);
						}
					}
				});
				//加载产品品牌下拉列表
				await api.request({
					method: 'GET',
					url: "/applet/productBrand/list",
					params: {
						"brShow": 0
					},
				}).then(res => {
					//alert(JSON.stringify(res));				
					if (res.code == 200) {
						//alert(JSON.stringify(res.rows));
						this.dataOptions_Pinpai.slice(0, this.dataOptions_Pinpai.length);
						for (var i = 0; i < res.rows.length; i++) {
							var item = res.rows[i];
							var rangeItem = {
								value: item.id,
								text: item.brName
							};
							this.dataOptions_Pinpai.push(rangeItem);
						}
					}
				});

				await api.request({
					method: 'GET',
					url: "/applet/league/list",
					params: {},
				}).then(res => {
					//alert(JSON.stringify(res));				
					if (res.code == 200) {
						//alert(JSON.stringify(res.rows));
						this.dataOptions_Shop.slice(0, this.dataOptions_Shop.length);
						for (var i = 0; i < res.rows.length; i++) {
							var item = res.rows[i];
							var rangeItem = {
								value: item.id,
								text: item.leName
							};
							this.dataOptions_Shop.push(rangeItem);
						}
					}
				});
			},
			toIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			save() {
				//alert(JSON.stringify(this.obj));
				//return;
				if (this.obj.quTypeId == null) {
					uni.showToast({
						icon: 'error',
						duration: 1000,
						title: '汽车膜型号为必选项！'
					})
					return;
				}
				uni.showLoading({
					title: '数据处理中...'
				});
				api.request({
					method: 'post',
					url: "/applet/guarantee",
					params: this.obj,
				}).then(res => {
					uni.hideLoading();
					//alert(JSON.stringify(res));					
					if (res.code == 200) {
						uni.showToast({
							title: '数据提交成功！',
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							});
						},4000);						
					}
				});
			}
		}
	}
</script>

<style>
	.inputright {
		float: left;
		margin-left: 0.5em;
		width: calc(100% - 10em);
	}

	.inputlable {
		float: left;
		min-width: 6em;
		/*background-color: #F5F5F5;*/
		text-align: right;
	}

	.row {
		text-align: center;
		font-size: 1.0em;
		margin-top: 0.3em;
		overflow: hidden;
	}

	.inputText {
		text-align: left;
		height: 2.0em;
		line-height: 2.0em;
		border: none;
		border-bottom: 1px solid #ccc;
		font-size: 0.8em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		width: 100%;
	}

	.clear {
		clear: both;
	}
</style>